<template>
	<div class="login">
		<!-- LOGO -->
		<div class="avatar">
			<img src="../assets/avator.png" >
		</div>
		<!-- 登录表单 -->
		<el-form ref="formT" :model="formT" :rules="rules">
			<el-form-item prop="username">
				<el-input 
				v-model="formT.username" 
				placeholder="用户名"
				prefix-icon="el-icon-user-solid"
				>
				</el-input>
			</el-form-item>
			
			<el-form-item prop="password">
				<el-input 
				v-model="formT.password" 
				placeholder="密码" 
				show-password
				prefix-icon="el-icon-key"
				>
				</el-input>
			</el-form-item>
			
			<el-form-item class="btnGroup">
				<el-button type="primary" @click="onSubmit">登录</el-button>
				<el-button @click="resetForm('formT')">重置</el-button>
			</el-form-item>
		</el-form>
			
	</div>
</template>

<script>
	import { userLoginApi } from '../apis/user.js'
	import { setToken , setID } from '../utils/localData.js'
	export default {
		data() {
		      return {
		        formT: {
		          username: '15626230051',
				  password: 'nimadebi~',
		        },
				
				rules: {
					username: [
						{ required: true, message: '请输入手机号', trigger: 'blur' },
						{ 
						  message: '手机号码格式有误', 
						  trigger: 'blur',
						  pattern: /^1\d{10}$|^10{2}[8,1][6,0]2$/,
						}
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 3, 
						  max: 18, 
						  message: '密码格式有误', 
						  trigger: 'blur',
						}
					]
				}
		      }
		    },
			methods: {
		        onSubmit() {
				this.$refs.formT.validate(async (bool) => {
					console.log(bool);
					if(bool){
						const res = await userLoginApi(this.formT);
						console.log(res);
						if(res.data.message === "登录成功" && res.data.data.token.length !== 0){
							setToken(res.data.data.token);
							setID(res.data.data.user.id);
							this.$router.push({path: '/home'})
							this.$message.success({
								message: '登录成功！',
								center: true,
							});
						}else{
							this.$message.error(res.data.message);
						}
					}else{
						return this.$message.error('手机号码或密码格式有误');
					}
				})

			  },
			  
			  resetForm(form){
				this.$refs[form].resetFields()
			  }
		    }
	}
</script>

<style lang="less" scoped>
	.login{
		height: 100%;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.avatar{
			position: relative;
			z-index: 10;
			bottom: 230px;
			background-color: #ffffff;
			width: 150px;
			height: 150px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2px 15px 15px #777777;
			img{
				width: 65%;
				height: 65%;
				position: relative;
				top: 5px;
			}
		}
		.el-form{
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			background-color: #ffffff;
			padding: 30px;
			width: 600px;
			height: 300px;
			border-radius: 15px;
			box-shadow: 0px 0px 10px 1px #cacaca;
			.el-form-item{
				width: 100%;
				
				/deep/.el-input__inner{
					text-align: center;
					font-size: 18px;
					letter-spacing: 0.2em;
				}
				/deep/.el-input__icon{
					font-size: 20px;
				}
			}
		
			.btnGroup{
				padding-left: 180px;
				.el-button{
					margin: 0 20px;
				}
			}
		}
	}
</style>
